<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>我的答题</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/answer/homework' }">作业</el-breadcrumb-item>
      <el-breadcrumb-item>{{homeworkname}}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="top">
      <el-radio v-model="type" label="1">严格模式</el-radio>
      <el-radio v-model="type" label="0">宽松模式</el-radio>
    </div>

    <el-row :gutter="20">
      <el-col :span="14">
        <div>
          <el-alert title="题目" type="success" center class="ques" :closable="false"></el-alert>

          <!-- +1 -->
          <!-- questions从后端获取的题目集，itemnum当前的题目号,question有两个属性，一个为content，一个是id -->
          <!-- {{questions[itemnum].details}} -->
          <div class="areaq">{{questions}}</div>

          <el-alert title="用户回答" type="error" effect="dark" center :closable="false" class="ans"></el-alert>

          <!-- 改v-model +1 -->
          <el-input
            type="textarea"
            :autosize="{ minRows: 7, maxRows: 7}"
            placeholder="答题区域"
            class="in"
            v-model="answer"
          ></el-input>

          <div class="btn">
            <el-button type="primary" @click="up" size="mini">上一题</el-button>
            <el-button type="danger" @click="submit" size="medium" class="btn2">确认提交</el-button>
            <el-button type="primary" @click="down" size="mini">下一题</el-button>
          </div>

          <!-- <el-row type="flex" justify="space-between">
            <el-col :span="6">
              <el-button type="primary" @click="up" icon="el-icon-arrow-left" size="mini">上一题</el-button>
            </el-col>
            <el-col :span="5" :push="1">
              <el-button type="danger" @click="submit" size="mini">提交回答</el-button>
            </el-col>
            <el-col :span="5" :push="2">
              <el-button type="primary" @click="down" size="mini">
                下一题
                <i class="el-icon-arrow-right el-icon--right"></i>
              </el-button>
            </el-col>
          </el-row>-->
        </div>
      </el-col>
      <el-col :span="8" :offset="2">
        <div class="result">
          <el-alert title="答题情况" type="success" effect="dark" center :closable="false"></el-alert>

          <div class="all">
            <!-- +1 -->
            <div class="areas">
              <span>得分</span>
              {{score}}
            </div>

            <div class="areak">
              <span>关键词</span>
              <div class="det" v-for="(item,index) in keywords" :key="index">
                <div class="p1">{{item}}---{{keyScore[index]}}</div>
                <!-- stroke-width宽度 -->
                <!-- text-inside 属性来将进度条描述置于进度条内部 -->
                <el-progress
                  :text-inside="true"
                  :stroke-width="10"
                  :percentage="userKeyScore[index]"
                  status="exception"
                  color="#E0E0E0"
                ></el-progress>
              </div>
            </div>

            <!-- +1 -->
            <div class="areaa">
              <span>标准答案</span>
              {{standard_ans}}
            </div>
          </div>
        </div>
        <el-button class="subh" type="success" @click="subhwork()">提交作业</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    // +1
    return {
      // +1
      questions: '',
      itemnum: 0,
      answer: '',
      score: null,
      standard_ans: '',
      keywords: [],
      keyScore: [],
      userKeyScore: [],

      // 还需改
      homeworkname: '',

      uid: this.$store.state.userId,
      questionsList: [],
      obj: {},
      type: '0' // 0宽松
    }
  },
  created() {
    this.getQuestion()
  },
  methods: {
    // 根据作业id，获取该作业包括的题目id数组,存储在questionList中
    async getQuestion() {
      console.log(this.$route.params.id)
      const { data: res } = await this.$http.get(
        'exam/getExamQuestionList/' + this.$route.params.id
      )
      if (res.code !== 200) return this.$message.error(res.message)
      this.homeworkname = Object.keys(res.data)[0]

      this.questionsList = res.data[this.homeworkname]
      this.questions = this.questionsList[this.itemnum].details
      console.log(this.questionsList)
    },

    // +1
    // 提交答案，携带答案,题目id,用户id
    async submit() {
      if (this.answer == null) {
        return this.$message.info('您还没有填入答案')
      } else {
        // post和get的参数传递不同，post用get的那种会出错，好像
        const { data: res } = await this.$http.post(
          `user/answer/submit?reply=${this.answer}&questionId=${
            this.questionsList[this.itemnum].id
          }&userId=${this.uid}&type=${this.type}`
        )
        if (res.code !== 200) return this.$message.error(res.message)
        console.log(res)

        // 需对关键词进行近一步处理
        // 额，这个逗号也分中英文！！
        this.keywords = this.questionsList[this.itemnum].keyWords.split(',')
        this.keyScore = this.questionsList[this.itemnum].keyScore.split(',')

        this.userKeyScore = res.data.userKeyScore.split(',')

        this.toNum(this.keyScore, this.userKeyScore)

        this.score = res.data.score
        this.standard_ans = this.questionsList[this.itemnum].formatAnswer
      }
    },

    // 提交作业
    async subhwork() {
      const { data: res } = await this.$http.post(
        `user/grade/addGrade?userId=${this.uid}&examId=${this.$route.params.id}`
      )
      if (res.code !== 200) return this.$message.error(res.message)
      this.$message.success(res.message)
    },

    clear() {
      this.answer = ''
      this.score = null
      this.standard_ans = ''
      this.keywords = []
      this.keyScore = []
      this.userKeyScore = []
    },

    up() {
      if (this.itemnum !== 0) {
        this.itemnum--
        this.questions = this.questionsList[this.itemnum].details
        this.clear()
      }
    },

    down() {
      if (this.itemnum < this.questionsList.length) {
        this.itemnum++
        this.questions = this.questionsList[this.itemnum].details
        this.clear()
      }
    },

    toNum(arr1, arr2) {
      for (var i = 0; i < arr1.length; i++) {
        arr2[i] = (arr2[i] / arr1[i]) * 100
        // if(this.type == '1') {
        //   if (i==5) {
        //     arr2[i] = 50
        //   }
        // }  为了应付视频的代码
      }
      console.log(arr2)
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  margin-bottom: 15px;
  margin-right: 40px;
  display: flex;
  flex-direction: row-reverse;
  .el-radio {
    margin-left: 40px;
  }
}

.subh {
  margin-top: 70px;
  margin-left: 150px;
}

.det {
  margin-top: 5px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  display: flex;
  .p1 {
    flex: 2;
  }

  .el-progress {
    margin-right: 10px;
    flex: 1;
  }

  /deep/ .el-progress-bar__outer {
    background-color: #e0e0e0 !important;
  }

  /deep/ .el-progress-bar__inner {
    background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
    line-height: 9px;
  }
}

.btn {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .el-button {
    background-color: #f55d54;
    border: none;
  }
  .btn2 {
    background-color: #e64340;
  }
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.ques {
  background: #2946e0 !important;
  color: #fff !important;
  // text-align: center;
}

/deep/ .el-alert__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 18px;
}

.result {
  background: #e8f4e8;
  height: 473px;
  span {
    font-size: 16px;
    color: #30b42f;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .all {
    margin-left: 30px;
    > div {
      margin: 20px 0px;
    }
  }
}

.areas {
  min-height: 50px;
  font-size: 14px;
  color: black;
}

.result > .el-alert {
  background: #2c9d2b !important;
  color: #fff !important;
}

.areaq {
  background: #e8ebfe;
  height: 120px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-left: 20px;
}

.areak {
  min-height: 50px;
}

.ans {
  margin-top: 60px;
}

.in {
  /deep/ .el-textarea__inner {
    background-color: #fddbd9;
  }
}
</style>